<!--
 * @Author: 杨湲 yy7072@qq.com
 * @Date: 2025-09-11 16:31:19
 * @LastEditors: 杨湲 yy7072@qq.com
 * @LastEditTime: 2025-10-07 11:55:07
 * @FilePath: \大三上实训\city\src\pages\components(1)\Right1.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <Title :title="title"></Title>
        {{ ed }}
        <div ref="chartContainer" style="height: 150px;margin-top:10px;"></div>
    </div>
</template>
<script>
import { DualAxes } from '@antv/g2plot';// 双轴折线图组件（核心可视化工具）
import { get } from '@/utils/request';// HTTP请求工具（调用后端接口）
import moment from 'moment'; // 时间格式化工具（处理时间戳）
import { mapState } from 'vuex';// Vuex辅助函数（获取全局状态`ed`）
export default {
    data() {
        return {
            title: '实时湿度曲线', // 图表标题（传给Title组件）
            params: { // 接口请求参数（筛选设备数据）
                page: 1, // 页码（默认请求第1页）
                pageSize: 100 // 每页条数（一次获取100条，保证数据覆盖度）
            },
            chartData: [], // 处理后的监测数据（最终传给图表，含时间、温度、湿度）
            chart: null // 双轴图表实例（存储实例便于后续更新数据，避免重复创建）
        };
    },

    computed: {
        ...mapState(['ed']), // 映射后可通过`this.ed`直接访问全局的设备/工程信息
    },
    watch: {
        ed: {
            handler(newVal) {
                 // newVal：切换后的新设备信息
                 // 1. 更新请求参数：用新设备的ID筛选数据
                this.params.engineer_id = newVal.engineer_id;
                this.params.device_id = newVal.device_id;
                // 2. 重新请求新设备的监测数据
                this.fetchChartData();
            },
            deep: true,// 深度监听：若`ed`是对象，其内部属性（如device_id）变化也会触发
        },
    },
    methods: {
        initChart() {
            // 创建双轴图表实例，绑定容器和配置
            this.chart = new DualAxes(this.$refs.chartContainer, {
                data: [this.chartData, this.chartData], // 两组数据（分别对应温度、湿度）
                xField: 'insert_time',
                yField: ['temperature', 'humidity'], // 两个 Y 轴字段
                // 两条折线的样式配置
                geometryOptions: [
                    {
                        geometry: 'line',// 图表类型：折线
                        color: '#588FF9',// 折线颜色：蓝色
                        smooth: true, // 折线平滑（避免尖锐）
                        point: {// 数据点样式
                            size: 5,
                            shape: 'circle',
                            style: { fill: 'pink', stroke: '#5B8FF9', lineWidth: 2 },
                        },
                    },
                    {
                        geometry: 'line',
                        color: '#5AD8A6',
                        smooth: true,
                        point: {
                            size: 5,
                            shape: 'circle',
                            style: { fill: 'lightgreen', stroke: '#5AD8A6', lineWidth: 2 },
                        },
                    },
                ],
                xAxis: {// X轴标签样式（适配深色背景）
                    label: {
                        rotate: -45,
                        style: { fill: 'white', fontSize: 20 },
                    },
                },
                yAxis: [
                    {
                         // 左轴（温度）
                        label: { style: { fill: 'white', fontSize: 20 } },
                    },
                    {
                        // 右轴（湿度）
                        label: { style: { fill: 'white', fontSize: 20 } },
                    },
                ],
                tooltip: {// 鼠标hover提示框样式
                    showMarkers: false,
                    domStyles: {
                        'g2--tooltip': { background: '#147', color: 'white', fontSize: 20 },
                    },
                },
                animation: {// 入场动画（提升视觉体验）
                    appear: { animation: 'wave-in', duration: 5000 },
                },
            });
            this.chart.render();// 渲染图表到DOM
        },
        async fetchChartData() {
            try {
                //  调用接口：获取当前设备的今日监测数据
                const res = await get('/dashboard/pageQueryTodayData', this.params);
                const tempData = [];// 临时存储处理后的数据
                res.data.list.forEach((item, index) => {
                     // ①异常修正：强制第一条数据的温度为15.4（临时处理数据异常）
                    if (index === 0) item.temperature = 15.4;
                    item.insert_time = moment(item.insert_time).format('HH:mm');
                    if (index % 10 === 0) tempData.push(item);
                });
                //  更新组件数据源
                this.chartData = tempData;
                // 4. 若图表已初始化，用新数据更新图表（避免重复创建实例，提升性能）
                if (this.chart) this.chart.changeData([this.chartData, this.chartData]);
            } catch (error) {
                console.error('获取数据失败：', error);
            }
        },
    },
    async mounted() {
        await this.fetchChartData();
        this.initChart();
    },
};
</script>
<style lang="less" scoped></style>
